<!DOCTYPE html>
<html>

<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link type="text/css" href="/css/cultivateWeb/style/news.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/teach.css" rel="stylesheet">

<body>
    <style>
        .left {
            float: left
        }

        .left span {
            font-size: 20px;
        }

        .active1 {
            border-bottom: 2px solid #005C34;
            color: #005C34
        }

        .spanChange:hover {
            cursor: pointer
        }

        .spanChange {
            margin: 0 10px
        }
        .filter_box {
            width:100%
        }
        .filter_box .filter_ul {
            position: relative;
            background-color: #fafafa;
            padding: 20px;
        }

        .more_citys {
            display: none;
            width: 80%;
            height: 100px;
            position: absolute;
            top: 5%;
            padding: 10px 60px 10px 0;
            background-color: #fafafa;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .filter_box ul li {
            padding: 5px 0;
        }

        .filter_box ul span,
        .more_citys span {
            font-weight: 600;
            font-size: 16px;
        }

        .filter_box ul a,
        .more_citys a {
            font-size: 14px;
            cursor: pointer;
            padding: 2px 5px;
            margin-right: 5px;
        }

        .active2 {
            color: #fff;
            background-color: #00b38a;
        }

        .filter_box li a:hover,
        .more_citys a:hover {
            background-color: #00b38a;
            color: #fff
        }

        .filter_box .more_btn {
            position: absolute;
            z-index: 11;
            top: 5%;
            right: 17%;
            /* margin-top: -35px;
            padding-top: 11px; */
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            background-color: transparent;
            font-weight: 400;
            color: #555;
        }

        .more_btn i {
            position: absolute;
            top: 50%;
            right: -25%;
            border-width: 6px 6px 0;
            border-style: solid dashed;
            border-color: #00b38a transparent transparent;
        }

        .noData {
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            margin-top: 20px;
            color: #999
        }

        ul,
        ul li {
            list-style: none;
        }

        .container {
            display: none;
            box-sizing: border-box;
        }

        .city-picker {
            width: 90%;
            min-height: 72px;
        }

        .tab {
            display: flex;
            height: 42px;
            margin: 0;
            padding: 0;
        }

        .tab li {
            flex: 1;
            position: relative;
            height: 42px;
            line-height: 42px;
            text-align: center;
            cursor: pointer;
        }


        .tab li span {
            display: block;
            width: 100%;
            height: 100%;
            color: #333;
        }

        .tab li.active {
            background: orangered;
            color: #fff;
        }

        .tab li.active span {
            color: #fff;
        }

        .tab-content {
            width: 100%;
            margin-top: 10px;
            box-sizing: border-box;
        }

        .tab-content .content {
            display: none;
            float: left;
            width: 100%;
            height: 100%;
            min-height: 20px;
            border: 1px solid orangered;
            border-radius: 3px;
            -webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            -moz-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            -ms-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            -o-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }

        .tab-content .content.active {
            display: block;
        }

        .tab-content .content dl {
            display: block;
            padding: 5px;
            margin: 5px;
            color: olivedrab;
            font-size: 14px;
            cursor: pointer;
        }

        .tab-content .content dl dt {
            display: block;
            width: 100%;
            line-height: 2;
            color: orangered;
            padding-left: 10px;
        }

        .tab-content .content dl dd {
            display: inline-block;
            padding: 0 5px;
            margin: 5px;
            color: #333;
            font-size: 14px;
        }

        .tab-content .content dl dd:hover {
            background: orangered;
            color: #fff;
        }
    </style>
    <!-- 顶部导航 -->
    <header th:include="cultivateWeb/header :: header"></header>
    <div style="clear: both"></div>
    <div style="background-color: #f7f7f7; ">
        <div style="height: 40px">
            <p style="margin: 0px auto auto 380px; line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 应聘就业
            </p>
        </div>

        <div style="background-color: #f7f7f7; width: 1200px; margin: 0 auto">
            <div style="margin-bottom: 50px; display: inline-block">
                <!-- 招聘查询 -->
                <section id="zp">
                    <div style="margin: 20px auto 20px 60px;line-height: 52px">
                        <div class="left">
                            <span data-type="0" class="active1 spanChange">热门</span>
                            <span data-type="1" class="spanChange">最新</span>
                        </div>
                        <input type="text" id="name" style="margin-left:200px;margin-right: 20px"
                            class="form-control query_1 left" placeholder="请输入岗位关键字" />
                        <input type="button" onclick="find();" value="搜索" class="but left" />
                        <div style="clear: both"></div>
                    </div>
                    <div class="filter_box">
                        <ul class="filter_ul">
                            <li id="city">
                                <span>工作地点：</span>
                                <a class="active2" onclick="selectBtn(0,null,this)">不限</a>
                                <a onclick="selectBtn(0,'北京',this)">北京</a>
                                <a onclick="selectBtn(0,'上海',this)">上海</a>
                                <a onclick="selectBtn(0,'深圳',this)">深圳</a>
                                <a onclick="selectBtn(0,'广州',this)">广州</a>
                                <a onclick="selectBtn(0,'杭州',this)">杭州</a>
                                <a onclick="selectBtn(0,'成都',this)">成都</a>
                                <a onclick="selectBtn(0,'南京',this)">南京</a>
                                <a onclick="selectBtn(0,'武汉',this)">武汉</a>
                                <a onclick="selectBtn(0,'长沙',this)">长沙</a>
                                <a onclick="selectBtn(0,'西安',this)">西安</a> 
                                <a onclick="selectBtn(0,'厦门',this)">厦门</a>
                                <a onclick="selectBtn(0,'苏州',this)">苏州</a>
                                <a onclick="selectBtn(0,'天津',this)">天津</a>
                                <a onclick="selectBtn(0,'重庆',this)">重庆</a>
                                <a onclick="selectBtn(0,'郑州',this)">郑州</a>
                                <a class="more_btn">更多<i></i></a>
                            </li>
                            <div class="container">
                                 <div class="city-picker">
                                    <ul class="tab" id="tab">
                                        <li class="item active"><span>热门</span></li>
                                        <li class="item"><span>ABCD</span></li>
                                        <li class="item"><span>EFGH</span></li>
                                        <li class="item"><span>JKLM</span></li>
                                        <li class="item"><span>NPQR</span></li>
                                        <li class="item"><span>STWX</span></li>
                                        <li class="item"><span>YZ</span></li>
                                    </ul>
                                    <div class="tab-content" id="tabContent">
                                        <div class="content active"></div>
                                        <div class="content"></div>
                                        <div class="content"></div>
                                        <div class="content"></div>
                                        <div class="content"></div>
                                        <div class="content"></div>
                                        <div class="content"></div>
                                    </div>
                                </div>
                            </div>

                            <li id="experience">
                                <span>工作经验：</span>
                            </li>
                            <li id="education">
                                <span>学历要求：</span>
                                <a class="active2" onclick="selectBtn(2,null,this)">不限</a>
                                <a onclick="selectBtn(2,'中职/中专/职高',this)">中职/中专/职高</a>
                                <a onclick="selectBtn(2,'高中',this)">高中</a>
                                <a onclick="selectBtn(2,'大专',this)">大专</a>
                                <a onclick="selectBtn(2,'本科',this)">本科</a>
                                <!--                                <a onclick="selectBtn(2,'研究生',this)">研究生</a>-->
                                <a onclick="selectBtn(2,'硕士研究生',this)">硕士研究生</a>
                                <a onclick="selectBtn(2,'博士研究生',this)">博士研究生</a>
                            </li> 

                            <li id="scale">
                                <span>公司规模：</span>
                                 <a class="active2" onclick="selectBtn(3,null,this)">不限</a>
                                <a onclick="selectBtn(3,'0-20人',this)">0-20人</a>
                                <a onclick="selectBtn(3,'20-99人',this)">20-99人</a>
                                <a onclick="selectBtn(3,'100-499人',this)">100-499人</a>
                                <a onclick="selectBtn(3,'500-1000人',this)">500-1000人</a>
                                <a onclick="selectBtn(3,'1000人以上',this)">1000人以上</a>
                            </li> 

                            <li id="industry">
                                <span>岗位类型：</span>
                            </li>

                            <li id="money">
                                <span>薪资要求：</span>
                            </li>
                        </ul>
                    </div>
                    <!-- <hr style="width: 1190px;margin: auto" /> -->
                    <div style="width: 100%;margin: auto" id="table"></div>
                    <div id="page" class="page"></div>
                </section>

            </div>
        </div>
    </div>
    <!-- footer ------------------------------------------------------- -->
    <div class="footer" th:include="cultivateWeb/header :: footer"></div>
    <script type="text/javascript" src="/js/xlPaging.js"></script>
    <script type="text/javascript" src="/js/city.js"></script>
</body>
<script>
    var oTab = getId("tab");
    var aItem = getEle("li", oTab);
    var oContainer = getId("tabContent");
    var aContent = getByCls("content", oContainer);
    var arr = cityAll.slice();
    arr.shift();
    var data = dividArr(arr, 4);
    tab(aItem, aContent, data);
    loadHotCity(aContent[0]);
    var selectedList = [null, null, null, null, null, null];//index: 0工作地点,1工作经验,2学历要求,3公司规模,4岗位类型,5薪资要求
    function getId(id) {
        return document.getElementById(id)
    }

    function getEle(tagName, parent) {
        return parent.getElementsByTagName(tagName);
    }

    function getByCls(cls, parent) {
        return parent.getElementsByClassName(cls);
    }

    function tab(aItem, aContent, group) {
        for (let i = 0; i < aItem.length; i++) {
            aItem[i].index = i;
            aItem[i].onclick = function () {
                var that = this;
                clearCls(aItem, aContent);
                this.className = "item active";
                aContent[this.index].className = "content active";
                switchCity(that, i, group);
            };
        }
    }

    function switchCity(target, index, group) {
        var oContainer = getId("tabContent");
        var aContent = getByCls("content", oContainer);
        if (index == 0) {
            aContent[0].innerHTML = '';
            loadHotCity(aContent[0]);
        } else {
            aContent[index].innerHTML = '';
            group[index - 1].forEach(function (item, a) {
                var dl = document.createElement('dl')
                var dt = document.createElement('dt');
                dt.innerHTML = item.name;
                dl.appendChild(dt);
                item.citys.forEach(function (i, b) {
                    var dd = document.createElement('dd');
                    dd.innerHTML = i;
                    dd.setAttribute('data-index', b)
                    // dd.setAttribute('class',active)
                    dd.setAttribute('onClick',"selectBtn(0,'"+i+"',this)")
                    dl.appendChild(dd)
                });

                aContent[index].appendChild(dl);
               
            });
        }
    }

    function dividArr(arr, n) {
        var x = 0,
            y = x + n;
        var result = [],
            len = arr.length;

        if (y >= len) {
            return result.push(arr)
        }
        while (y < len) {
            result.push(arr.slice(x, y));
            x = x + n;
            y = x + n;
            if (y > len) {
                y = len;
                result.push(arr.slice(x, y));
                break;
            }
        }

        return result;
    }

    function clearCls(aItem, aContent) {
        for (let i = 0; i < aItem.length; i++) {
            aItem[i].className = "item";
            aContent[i].className = "content";
        }
    }

    function loadHotCity(hotCity) {
        var hotCitys = cityAll[0];
        hotCity.innerHTML = '';
        var dl = document.createElement("dl");
        hotCity.appendChild(dl)
        var dt = document.createElement('dt')
        dt.innerHTML = cityAll[0].name;
        dl.appendChild(dt);
        hotCitys.citys.forEach(function (item, index) {
            var oText = document.createElement('dd');
            oText.innerHTML = item;
            oText.setAttribute('data-index', index)
            // oText.setAttribute('class',active)
            oText.setAttribute('onClick',"selectBtn(0,'"+item+"',this)")
            dl.appendChild(oText);
        });
    }
    function apply(id) {
        ajaxToken("/jzApi/recruitment/addResume", "POST", { id: id }, function (res) {
            layer.confirm("投递成功，请静候佳音！");
        });
    }

    function find() {
        var name = $("#name").val();
        recruit(name, 0)
    }

    $(function () {
        recruit("", 0);
        $(".spanChange").click(function () {
            $(this).addClass("active1");
            $(this).siblings().removeClass("active1");
            recruit("", $(this).attr("data-type"));
        })
    });
    $('.more_btn').click(function () {
        $(".container").toggle();
    });
    function recruit(name, type) {
        $.ajax({
            url: '/jzApi/recruitment/selJobList',
            data: {
                current: 1,
                number: 10,
                name: name,
                type: type,
                city: selectedList[0],
                experience: selectedList[1],
                education: selectedList[2],
                scale: selectedList[3],
                postName: selectedList[4],
                requirement: selectedList[5],
            },
            success: function (r) {
                if (r.data.pages == 0) {
                    $("#table").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = r.data.records;
                    var table = '';
                    list.forEach(function (item, index) {
                        var b = '';
                        if (item.isTop == 1) {
                            b = '<span style="color: #ff552e;font-size: 16px">(置顶)</span>'
                        }
                        if (item.welfareInroduce != '') {
                            if (item.welfareInroduce.length > 20) {
                                item.welfareInroduce = item.welfareInroduce.substring(0, 20) + '...'
                            }
                        }
                        if (item.address != '') {
                            if (item.address.length > 9) {
                                item.address = item.address.substring(0, 9) + '...'
                            }
                        }
                        table += '<div class="zw">' +
                            '<a href="/cultivate/recruitInfo?id=' + item.id + '"><span class="zw_1">' + item.name + '(招' + item.numbers + '人)' + b + '</span>' +
                            '<span class="zw_2">' + item.salaryRange + '/月</span>' +
                            '<span class="zw_3">' +
                            '<span class="zw_4">' + item.address + '</span>' +
                            '<span class="zw_4">' + item.workExperience + '</span>' +
                            '<span class="zw_4">' + item.education + '</span>' +
                            '</span>' +
                            '</div>' +
                            '<div class="gs">' +
                            '<span class="gs_1">' + item.orgName + '</span>' +
                            '<span class="gs_2">' + item.welfareInroduce + '</span>' +
                            '</div>' +
                            '<div></a>' +
                            '<span class="sq">' +
                            '<input type="button" id="apply" onclick="apply(\'' + item.id + '\')" value="申请" class="sqBtn" />' +
                            '<input type="button" id="applyed"  value="已申请" class="sqBtn1" />' +
                            '</span>' +
                            '</div><div style="clear: both"></div>' +
                            '<hr style="width: 1190px;margin: auto"/>';
                    });
                    table += '<div style="clear: both"></div>';
                    $("#table").html(table);
                    page(1, r.data.pages, $("#name").val(), type);
                }

            }
        })
    }

    function page(num, tolPages, name, type) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                $.ajax({
                    url: "/jzApi/recruitment/selJobList",
                    type: 'GET',
                    data: {
                        current: num,
                        number: 10,
                        name: name,
                        type: type,
                        city: selectedList[0],
                        experience: selectedList[1],
                        education: selectedList[2],
                        scale: selectedList[3],
                        postName: selectedList[4],
                        requirement: selectedList[5],
                    },
                    success: function (res) {
                        var list = res.data.records;
                        var table = '';
                        list.forEach(function (item, index) {
                            var b = '';
                            if (item.isTop == 1) {
                                b = '<span style="color: #ff552e;font-size: 16px">(置顶)</span>'
                            }
                            if (item.welfareInroduce != '') {
                                if (item.welfareInroduce.length > 20) {
                                    item.welfareInroduce = item.welfareInroduce.substring(0, 20) + '...'
                                }
                            }
                            if (item.address != '') {
                                if (item.address.length > 9) {
                                    item.address = item.address.substring(0, 9) + '...'
                                }
                            }
                            table += '<div class="zw">' +
                                '<a href="/cultivate/recruitInfo?id=' + item.id + '"><span class="zw_1">' + item.name + '(招' + item.numbers + '人)' + b + '</span>' +
                                '<span class="zw_2">' + item.salaryRange + '/月</span>' +
                                '<span class="zw_3">' +
                                '<span class="zw_4">' + item.address + '</span>' +
                                '<span class="zw_4">' + item.workExperience + '</span>' +
                                '<span class="zw_4">' + item.education + '</span>' +
                                '</span>' +
                                '</div>' +
                                '<div class="gs">' +
                                '<span class="gs_1">' + item.orgName + '</span>' +
                                '<span class="gs_2">' + item.welfareInroduce + '</span>' +
                                '</div>' +
                                '<div></a>' +
                                '<span class="sq">' +
                                '<input type="button" id="apply" onclick="apply(\'' + item.id + '\')" value="申请" class="sqBtn" />' +
                                '<input type="button" id="applyed"  value="已申请" class="sqBtn1" />' +
                                '</span>' +
                                '</div><div style="clear: both"></div>' +
                                '<hr style="width: 1190px;margin: auto"/>';
                        });
                        table += '<div style="clear: both"></div>';
                        $("#table").html(table);
                    }
                });
            }
        });
    }

    $(function () {
        $.ajax({
            url: '/jzApi/recruitment/selScreen',
            type: 'GET',
            data: {},
            success: function (res) {
                var industryList = res.data.industryList;
                var experienceList = res.data.experienceList;
                var moneyList = res.data.moneyList;
                var industry = '<a class="active2" onclick="selectBtn(4,null,this)">不限</a>';
                var experience = '<a class="active2"  onclick="selectBtn(1,null,this)">不限</a>';
                var money = '<a class="active2"  onclick="selectBtn(5,null,this)">不限</a>';
                //岗位类型
                industryList.forEach(function (item, index) {
                    industry += '<a onclick="selectBtn(4,\'' + item.name + '\',this)">' + item.name + '</a>';
                });
                // 薪资
                moneyList.forEach(function (item, index) {
                    money += '<a onclick="selectBtn(5,\'' + item.name + '\',this)">' + item.name + '</a>';
                });
                // 工作经验
                experienceList.forEach(function (item, index) {
                    experience += '<a onclick="selectBtn(1,\'' + item.name + '\',this)">' + item.name + '</a>'
                });
                $('#industry').html($('#industry').html() + industry);
                $('#experience').html($('#experience').html() + experience);
                $('#money').html($('#money').html() + money);

            }
        })
    })
    function selectBtn(type, value, e) {//type: 0工作地点,1工作经验,2学 历要求,3公司规模,4岗位类型,5薪资要求
        if (type < 0 || type > 5) {
            return;
        }
        selectedList[type] = value;
        $(e).addClass("active2");
        $(e).siblings().removeClass("active2");
        recruit($("#name").val(), 0);

    }

</script>

</html>